<template>
    <header class="header">
      <h1>多用户博客平台</h1>
      <nav class="top-nav">
        <ul>
          <li :class="{ active: currentSection === 'home' }" @click="navigateTo('home')">首页</li>
          <li :class="{ active: currentSection === 'profile' }" @click="navigateTo('profile')">个人中心</li>
          <li :class="{ active: currentSection === 'activities' }" @click="navigateTo('activities')">活动中心</li>
        </ul>
      </nav>
      <button @click="logout">退出</button>
    </header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const currentSection = ref('home');
const currentContent = ref('allBlogs'); 

const logout = () => {
  router.push('/'); 
}

// 导航函数
const navigateTo = (section) => {
  currentSection.value = section; 
  router.push(`/${section}`);
}

// 选择左侧导航栏的内容
const selectSection = (section) => {
  currentContent.value = section; 
}


onMounted(() => {
  currentSection.value = router.currentRoute.value.name.toLowerCase(); 
});
</script>




<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.top-nav {
  margin-bottom: 20px; 
}

.top-nav ul {
   
  list-style-type: none; 
  padding: 0; 
  display: flex; 
}

.top-nav li {
  margin-right: 20px; 
  cursor: pointer; 
  color: black; 
}

.top-nav li.active {
  color: blue; 
}
</style>